const imgURL = chrome.runtime.getURL('police.png')
const container = document.createElement('div')
const width = window.innerWidth
const height = window.innerHeight
container.style.width = width + 'px'
container.style.height = height + 'px'
container.style.position = 'fixed'
container.style.zIndex = '999'
container.style.display = 'flex'
container.style.flexDirection = 'column'
container.style.justifyContent = 'center'
container.style.alignItems = 'center'
container.style.backgroundColor = '#727578'

const img = document.createElement('img')
img.src = imgURL
img.style.width = '40%'
img.style.height = 'auto'

const text = document.createElement('span')
text.innerText = 'Stop Working , Go For Relax'
text.style.fontSize = '50px'
text.style.color = '#fff'

const timeCounter = document.createElement('span')
timeCounter.innerText = 10
timeCounter.style.fontSize = '50px'
timeCounter.style.color = '#fff'

container.appendChild(img)
container.appendChild(text)
container.appendChild(timeCounter)

chrome.extension.onMessage.addListener((request) => {
	if (request.relax === true) {
		document.body.insertBefore(container, document.body.childNodes[0])
		let time = 10
		const id = setInterval(() => {
			time--
			timeCounter.innerText = time
			if (!time) {
				document.body.removeChild(container)
				timeCounter.innerText = 10
				clearInterval(id)
			}
		}, 1000)
	}
})
